<template>
    <el-container class="assist_container">
        <vAside ref="aside" :options="asideOptions"
                :treeOptions="treeOptions"
                :treeData="treeData"
                @event="handleAsideEvent">
        </vAside>
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="toolbar_buttons"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent" />
                <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                  @event="handleTableEvent" />
            </el-card>
        </el-main>
        <component-dialog dialog-drag :options="componentDialogOption" />
    </el-container>
</template>

<script>
import BaseAssistApi from "@common/api/base/BaseAssistApi";
import AssistForm from "../dialog/AssistForm";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: 'Assist',
    provide() {
        //向下级组件注入方法
        return {
            setChildrenRef: (name, ref) => {
                this[name] = ref;
            },
            getChildrenRef: (name) => {
                return this[name];
            },
            getRef: () => {
                return this;
            },
        };
    },
    data() {
        const _this = this;
        return {
            asideOptions: {
                //左侧树
                width: "300px",
                title: "分类导航",
            },
            treeOptions: {
                ref: "checkTree",
                highlightCurrent: true,
                defaultExpandAll: true,
                props: {
                    label: "name",
                },
                //右侧按钮
                buttons: [
                    // {
                    //     icon: "fa fa-pencil",
                    //     method: (data, $event) => {
                    //         _this.openDialog(data, 'edit', true);
                    //     },
                    // },
                    // {
                    //     icon: "fa fa-trash-o",
                    //     method: (data, $event) => {
                    //         _this.handleTypeConfirm(data);
                    //     },
                    // },
                ],
            },
            treeData: [],
            searchForm: {}, //搜索条件
            toolbar_buttons: [
                {
                    id: "refresh",
                    icon: "fa fa-refresh",
                    show: true,
                    method: () => {
                        _this.getList();
                    },
                },
                {
                    id: "add",
                    type: "primary",
                    icon: "fa fa-plus",
                    show: true,
                    permission: "save_base_assist_data",
                    method: () => {
                        _this.openDialog(null, "add");
                    },
                },
                {
                    id: "edit",
                    type: "success",
                    icon: "fa fa-pencil",
                    show: true,
                    permission: "save_base_assist_data",
                    method: () => {
                        _this.openDialog(null, "edit");
                    },
                },
                {
                    id: "del",
                    type: "danger",
                    icon: "fa fa-trash-o",
                    show: true,
                    permission: "del_base_assist_data",
                    method: () => {
                        _this.openDel();
                    },
                },
            ],
            //左侧按钮
            toolbar_filter: [
                // { type: "text", field: "number", label: "编码" },
                // { type: "text", field: "name", label: "名称" },
            ], //精确筛选
            dataList: [],
            tableOptions: {
                ref: "assistTable",
                container: ".assist_container",
                multiSelect: true,
                columns: [],
                baseColumns: [
                    {
                        label: "编码",
                        prop: "code",
                        align: "center",
                    },
                    {
                        label: "名称",
                        prop: "name",
                        align: "center",
                    },
                ],
                operates: {
                    list: [
                        {
                            id: "info",
                            icon: "fa fa-pencil",
                            show: true,
                            type: "success",
                            tooltip: {
                                content: "编辑",
                            },
                            permission: "save_base_assist_data",
                            method: (key, row, index) => {
                                _this.openDialog(row, "edit");
                            },
                        },
                        {
                            id: "info",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            show: true,
                            tooltip: {
                                content: "删除",
                            },
                            permission: "del_base_assist_data",
                            method: (key, row, index) => {
                                _this.openDel(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                },
            },
            selectionList: [], //列表选择数据
            treeNodeKey: {}, //当前选中树节点
        };
    },
    mounted() {
        this.initTreeData();
    },
    methods: {
        // 分类删除确认
        handleTypeConfirm(data) {
            let id = data.id;
            let $this = this;
            if (data.childrens && data.childrens.length) {
                return $this.$message.warning("存在下级分类，请先删除下级分类");
            }
            $this.$confirm("是否确认删除分类，分类下的数据也会删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                BaseAssistApi.deleteBaseAssistType({ id }, () => {
                    if (id == $this.treeNodeKey.id) {
                        $this.treeNodeKey = {};
                    }
                    $this.initTreeData();
                    $this.$message.success("删除成功");
                });
            }).catch(() => {
            });
        },
        // 获取分类树的数据
        initTreeData() {
            let $this = this;
            $this.treeData = [];
            let queryData = {};
            BaseAssistApi.findBaseAssistTypes(queryData, (result) => {
                $this.treeData = result.data || [];
                if ($this.treeNodeKey.id) {
                    $this.$nextTick(() => {
                        $this.checkTree.setCurrentKey($this.treeNodeKey.id);
                    });
                } else if ($this.treeData && $this.treeData.length > 0) {
                    $this.$nextTick(() => {
                        $this.checkTree.setCurrentKey($this.treeData[0].id);
                        $this.treeNodeKey = $this.treeData[0];
                        $this.getList(true);
                    });
                }
            });
        },
        // 接收当前点击分类
        handleAsideEvent(event) {
            let $this = this;
            if (event.type === "nodeClick") {
                $this.treeNodeKey = event.data;
                $this.getList(true);
            }
        },
        // 接收搜索条件
        handleHeaderEvent(event) {
            let $this = this;
            $this.searchForm = $.extend({}, $this.searchForm, event.searchForm);
            if (event.type === "search") {
                $this.getList(true);
            } else if (event.type === "refresh") {
                $this.getList(true);
            }
        },
        initTableOptions() {
            let $this = this;
            let filter = $this.treeData.filter(item => item.sid === $this.treeNodeKey.sid);
            let columns = [].concat($this.tableOptions.baseColumns);
            if ($this.$utils.isNotEmptyList(filter) && filter[0].code === 'material') {
                columns = columns.concat([
                    {
                        label: "单价",
                        prop: "price",
                        align: "center",
                    },
                    {
                        label: "备注",
                        prop: "note_info",
                        align: "center",
                    }
                ]);
            }
            $this.tableOptions = $.extend({}, $this.tableOptions, {
                columns,
            });
        },
        // 获取列表数据
        getList(search) {
            let $this = this;
            $this.initTableOptions();
            $this.dataList = [];
            if (search) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let queryData = $this.getQueryParams($this.tableOptions, $this.searchForm);
            if ($this.treeNodeKey.sid) {
                queryData.assist_type_sid = $this.treeNodeKey.sid;
            }
            BaseAssistApi.findBaseAssistDatas(queryData, result => {
                $this.dataList = result.data || [];
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        //新增/编辑
        openDialog(row, type, isType = false) {
            const _this = this;
            let title = type === 'add' ? '创建' : '编辑';
            if (isType) {
                title += '分类';
            }
            if (!row) {
                if (type === 'add') {
                    row = {
                        assist_type_sid: _this.treeNodeKey.sid,
                    };
                    if (isType) {
                        row = {};
                    }
                }
                if (type === 'edit') {
                    if (!_this.checkSelection(_this.selectionList)) {
                        return;
                    }
                    row = $.extend({}, _this.selectionList[0]);
                }
            }
            _this.openComponentDialog({
                width: '600px',
                title,
                component: AssistForm,
                propsData: {
                    type: isType ? 'type' : 'data',
                    row,
                },
                callback() {
                    if (isType) {
                        _this.initTreeData();
                    } else {
                        _this.getList();
                    }
                },
            });
        },
        openDel(row) {
            let $this = this;
            let sids = [];
            if (!row) {
                if (!$this.checkSelection($this.selectionList, true)) {
                    return;
                }
                sids = $this.selectionList.map(item => item.sid);
            } else {
                sids.push(row.sid);
            }
            $this.confirmDel(sids);
        },
        confirmDel(ids) {
            let $this = this;
            $this.$confirm("是否继续删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                BaseAssistApi.batchDeleteBaseAssistData({ sid_list: ids }, () => {
                    $this.getList();
                    $this.$message.success("删除成功");
                });
            }).catch(() => {
            });
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.assist_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
